<template>
    <div class="hot max-width">
        <router-link :to="'/detail?id='+data.hot1.id" v-if="data.hot1" class="img1">
            <img-hover class="img" :img1="data.hot1.img1.fullUrl" :img2="data.hot1.img2.fullUrl"></img-hover>
        </router-link>
        <div class="sect">
            <router-link :to="'/detail?id='+data.hot2.id" v-if="data.hot2">
                <img-hover class="img" :img1="data.hot2.img1.fullUrl" :img2="data.hot2.img2.fullUrl"/>
            </router-link>
            <router-link :to="'/detail?id='+data.hot3.id"
                         v-if="data.hot3">
                <img-hover class="img" :img1="data.hot3.img1.fullUrl" :img2="data.hot3.img2.fullUrl"/>
            </router-link>
            <router-link :to="'/detail?id='+data.hot4.id"
                         v-if="data.hot4">
                <img-hover class="img" :img1="data.hot4.img1.fullUrl" :img2="data.hot4.img2.fullUrl"/>
            </router-link>
            <router-link :to="'/detail?id='+data.hot5.id"
                         v-if="data.hot5">
                <img-hover class="img" :img1="data.hot5.img1.fullUrl" :img2="data.hot5.img2.fullUrl"/>
            </router-link>
        </div>
    </div>
</template>
<script>
    import ImgHover from "../../components/ImgHover";

    export default {
        components: {ImgHover},
        props: {
            value: {
                type: Object, default() {
                    return {
                        hot1: {img1: {}, img2: {}},
                        hot2: {img1: {}, img2: {}},
                        hot3: {img1: {}, img2: {}},
                        hot4: {img1: {}, img2: {}},
                        hot5: {img1: {}, img2: {}},
                    }
                }
            }
        },
        data() {
            return {data: this.value};
        },
        watch: {
            value: {
                deep: true,
                handler(value) {
                    this.data = value;
                }
            }
        },
        methods: {}
    }

</script>
<style>
    .hot {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        margin: 3rem auto;
        flex-wrap: wrap;
    }

    .hot .img1 {
        width: 49rem;
        min-width: 24rem;
        height: 49rem;
        max-height: 49rem;
        margin: 1rem 0.5rem 0;
    }

    .hot .img1 > div{
        width: 49rem;
        min-width: 24rem;
        height: 49rem;
        max-height: 49rem;
    }

    .hot .sect {
        display: flex;
        flex-wrap: wrap;
        width: 49rem;
        min-width: 24rem;
        justify-content: space-between;
        justify-items: center;
        margin: 1rem 0.5rem 0;
    }

    .hot .sect > * {
        display: block;
        width: 24rem;
        min-width: 24rem;
        height: 24rem;
    }

    .hot .sect > * > div{
        display: block;
        width: 24rem;
        min-width: 24rem;
        height: 24rem;
    }

    @media screen and (max-width: 60rem) {
        .hot .sect {
            width: 90vw;
        }

        .hot .img1, .hot .img1 > div ,  .hot .sect > a , .hot .sect > a > div  {
            width: 90vw;
            height: 90vw;
        }
    }
</style>
